<div class="card">
  <div class="card-header">
    <div class="row">
      <div class="col col-md-6">
        <h5 class="card-title">
          {{ "::Menu:Books" | abpLocalization }}
        </h5>
      </div>
      <div class="text-right col col-md-6">
        <div class="text-lg-right pt-2">
          <button
            id="create"
            class="btn btn-primary"
            type="button"
            (click)="createBook()"
          >
            <i class="fa fa-plus mr-1"></i>
            <span>{{ "::NewBook" | abpLocalization }}</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="card-body">
    <abp-table
      [value]="books$ | async"
      [abpLoading]="loading"
      [headerTemplate]="tableHeader"
      [bodyTemplate]="tableBody"
      [rows]="10"
      [scrollable]="true"
    >
    </abp-table>
    <ng-template #tableHeader>
      <tr>
        <th>{{ "::Actions" | abpLocalization }}</th>
        <th>{{ "::Name" | abpLocalization }}</th>
        <th>{{ "::Type" | abpLocalization }}</th>
        <th>{{ "::PublishDate" | abpLocalization }}</th>
        <th>{{ "::Price" | abpLocalization }}</th>
      </tr>
    </ng-template>
    <ng-template #tableBody let-data>
      <tr>
        <td>
          <div ngbDropdown container="body" class="d-inline-block">
            <button
              class="btn btn-primary btn-sm dropdown-toggle"
              data-toggle="dropdown"
              aria-haspopup="true"
              ngbDropdownToggle
            >
              <i class="fa fa-cog mr-1"></i>{{ "::Actions" | abpLocalization }}
            </button>
            <div ngbDropdownMenu>
              <button ngbDropdownItem (click)="editBook(data.id)">
                {{ "::Edit" | abpLocalization }}
              </button>
              <button ngbDropdownItem (click)="delete(data.id, data.name)">
                {{ "AbpAccount::Delete" | abpLocalization }}
              </button>
            </div>
          </div>
        </td>
        <td>{{ data.name }}</td>
        <td>{{ booksType[data.type] }}</td>
        <td>{{ data.publishDate | date }}</td>
        <td>{{ data.price }}</td>
      </tr>
    </ng-template>
  </div>
</div>

<abp-modal [(visible)]="isModalOpen">
  <ng-template #abpHeader>
    <h3>
      {{
        (selectedBook.id ? "AbpIdentity::Edit" : "::NewBook") | abpLocalization
      }}
    </h3>
  </ng-template>

  <ng-template #abpBody>
    <form [formGroup]="form">
      <div class="form-group">
        <label for="book-name">Name</label><span> * </span>
        <input
          type="text"
          id="book-name"
          class="form-control"
          formControlName="name"
          autofocus
        />
      </div>

      <div class="form-group">
        <label for="book-price">Price</label><span> * </span>
        <input
          type="number"
          id="book-price"
          class="form-control"
          formControlName="price"
        />
      </div>

      <div class="form-group">
        <label for="book-type">Type</label><span> * </span>
        <select class="form-control" id="book-type" formControlName="type">
          <option [ngValue]="null">Select a book type</option>
          <option [ngValue]="booksType[type]" *ngFor="let type of bookTypeArr">
            {{ type }}</option
          >
        </select>
      </div>

      <div class="form-group">
        <label>Publish date</label><span> * </span>
        <input
          #datepicker="ngbDatepicker"
          class="form-control"
          name="datepicker"
          formControlName="publishDate"
          ngbDatepicker
          (click)="datepicker.toggle()"
        />
      </div>
    </form>
  </ng-template>

  <ng-template #abpFooter>
    <button type="button" class="btn btn-secondary" #abpClose>
      {{ "AbpAccount::Close" | abpLocalization }}
    </button>

    <button class="btn btn-primary" (click)="save()" [disabled]="form.invalid">
      <i class="fa fa-check mr-1"></i>
      {{ "AbpAccount::Save" | abpLocalization }}
    </button>
  </ng-template>
</abp-modal>
